<template>
	<view style="width: 85%; margin: auto;">
		<view>
			<view class="mini box1">
				<view>支持保存电子照</view>
				<view>支持冲印</view>
				<view>支持照片审核</view>
			</view>
			<view class="ty">
				<view>
					<view class="mini">规格</view>
					<view style="margin-top: 30rpx; font-weight: bold;">{{detail.specName}}</view>
				</view>
				<view>
					<view class="mini">油印尺寸</view>
					<view style="margin-top: 30rpx; font-weight: bold;">{{detail.sizeMm}}</view>
				</view>
				<view>
					<view class="mini">像素尺寸</view>
					<view style="margin-top: 30rpx; font-weight: bold;">{{detail.sizePx}}</view>
				</view>

			</view>
		</view>
		<view class="box2">
			<view style="display: flex;">
				<view class="mini" style="padding: 40rpx;font-size: 30rpx;">背景色</view>
				<up-radio-group v-model="form.color" @change="getIsCOLOR">
					<view v-for="(item, index) in detail.abackground.split('、')" :key="index">
						<view v-if="isShowColor(item)" class="dy">
						<!-- 	<div style="margin-top: 30rpx;margin-left: 5rpx;">
								<up-radio :name="item">
								</up-radio>
							</div> -->

							<view class="cor1" :style="{background:[item]}">
							</view>
						</view>
					</view>
				</up-radio-group>

			</view>

			<!-- <view style="display: flex;justify-content: space-between;">
				<view class="mini" style="padding: 40rpx;font-size: 30rpx;">规格</view>
				<view class="allContent">{{detail.specName}}</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view class="mini" style="padding: 40rpx;font-size: 30rpx;">DBI</view>
				<view class="allContent">{{detail.adbi}}</view>
			</view> -->
			<view style="display: flex;justify-content: space-between;">
				<view class="mini" style="padding: 40rpx;font-size: 30rpx;">注意</view>
				<view class="allContent">漏出眉毛和耳朵、面部无遮挡</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<view style="width: 175rpx;"></view>
				<view>尽量保证背景和衣服区分明显确保光线充足</view>
			</view>
		</view>
		<view class="bt1">
			<up-button text="相册上传" size="normal" type="info" plain @click="upload('album')"></up-button>
			<view style="width: 50rpx;"></view>
			<!-- <up-button text="直接拍照"></up-button> -->
			<up-button text="直接拍照" size="normal" type="success" @click="upload('camera')"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		// 05368097178
		onShow,
		onHide,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue"
	const detail = ref({})
	const form = ref({
		color: 'blue'
	})
	//目前可展示的颜色
	const showColor = ref(['blue', 'white', 'red'])
	onLoad((option) => {
		detail.value = JSON.parse(option.item)
	})
	// 1相册上传 2拍照上传
	function upload(type) {
		// album 从相册选图，camera 使用相机
		uni.chooseImage({
			count: 6, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: [type], //从相册选择
			success: function(res) {
				let imgSrc = res.tempFilePaths[0];;
				// console.log("打印一下啊",imgBase64);
				uni.navigateTo({
					url:"/pages/uploadresult/uploadresult?detail="
					+JSON.stringify(detail.value)
					+"&imgSrc="+imgSrc
				})
				
				
				

			}

		})

	}

	// const isShowColor=
	function isShowColor(item) {
		return showColor.value.includes(item);
		// console.log("打印啊啊 ",item);

	}
</script>

<style scoped>
	.bt1 {
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
	}

	.dy {
		display: flex;
		justify-content: flex-end;
		/* flex-direction: row-reverse; */
	}

	.title {
		font-weight: bold;
		text-align: center;
		margin-top: 20rpx;
	}

	.box1 {
		display: flex;
		justify-content: space-around;
		margin-top: 25rpx;
	}

	.mini {
		font-size: 24rpx;
		color: gray;
	}

	.ty {
		display: flex;
		margin-top: 50rpx;
		justify-content: space-around;
	}

	.box2 {
		background-color: #F6F7FB;
		/* height: 500rpx; */
		margin-top: 100rpx;
	}

	.cor1 {
		width: 40rpx;
		height: 40rpx;
		margin-top: 40rpx;
		margin-left: 20rpx;
	}

	.cor2 {
		margin-top: 35rpx;
		margin-left: 10rpx;
	}

	.allContent {
		margin-top: 40rpx;
		margin-right: 90rpx;
	}
</style>